<template>
  <el-container>
    <div class="h-logo">
      <el-image @click="backToMain" fit="contain" :src="require('../../assets/images/logo.png')"></el-image>
      <span>副中心枢纽勘察总体管理系统</span>
       <!-- <span>北运河廊坊段旅游通航工程</span> -->
    </div>
    <div v-if="true" class="h-widget">
      <div v-if="false" class="icon">
        <el-badge :value="1">
          <i class="el-icon-warning"></i>
        </el-badge>
      </div>
      <div v-if="false" class="icon">
        <el-badge :value="2">
          <i class="el-icon-message-solid"></i>
        </el-badge>
      </div>
      <div v-if="true" class="icon" @click="gotohelp">
        <i class="el-icon-question"></i>
      </div>
      <div class="icon" style="font-size:15px">{{user.name}}</div>
      <div v-show="true" class="block">
        <el-popover placement="top-start" title="个人设置" width="100px" trigger="hover">
          <div style="text-align: right; margin: 0">
						<el-button type="primary" size="small" @click="updatePwd">修改密码</el-button>
						<el-button type="warning" size="small" @click="Logout">退出登录</el-button>
          </div>
          <el-avatar slot="reference" :size="30" :src="user.avatar"></el-avatar>
        </el-popover>
      </div>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "myHeader",
  data() {
    return {
      user: {
        avatar: require("../../assets/images/avatar.png"),
        name: this.$store.state.m_user.userInfo.nick_name
      }
    };
  },

  methods: {
    backToMain() {
      this.$router.push("/main");
    },

		updatePwd(){
			this.$router.push("/me");
		},

    Logout() {
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("vuex");
      this.$store.commit("reset");
      this.$router.push("/login");
    },

    gotohelp() {
      window.open("http://39.106.121.254:5031/help/help.pdf")
    }
  }
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: space-between;
  background-color: #1296db;
  height: 100%;
  .h-logo {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    height: 100%;
    padding-left: 10px;

    .el-image {
      width: 70px;
      cursor: pointer;
    }

    span {
      color: white;
      font-size: 20px;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .h-widget {
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    height: 100%;
    .icon {
      color: white;
      font-size: 20px;
      padding: 0px 10px;
      height: 100%;
      vertical-align: middle;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
    }

    .icon:hover {
      background-color: #006eab;
    }

    .el-avatar {
      margin: 0px 10px;
      cursor: pointer;
      background: #fff;
    }
  }
}
</style>